<template>
  <div>
    <div class="nav">
      <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()" />
    </div>
    <div class="center">
      <list title="头像" @onList="show = true">
        <img :src="userList.avatar" alt="" />
      </list>
      <list title="昵称" :val="userList.nickname"> </list>
      <list title="手机号" :val="userList.mobile"> </list>
      <list title="性别" val="保密"> </list>
      <list title="出生日期" val="请选择"> </list>
      <list title="所在城市" val=""> </list>
      <list title="学科" val=""> </list>
       <van-popup v-model="show" position="bottom" />
      <van-popup v-model="show" position="bottom" style="width:100%">
        <div class="popup_item">
          <span>拍照选择</span>
        </div>

        <div class="popup_item">
          <span class="span" @click="updateImg">从相册选择 </span>
          <input
            type="file"
            v-show="false"
            ref="fileRef"
            @change="filechange"
          />
        </div>

        <div class="popup_item" @click="show = false">
          <span>取消</span>
        </div>
      </van-popup>
    </van-popup>
    </div>
   
  </div>
</template>
<script>
import List from "./List.vue";
import { Userinfo, UserupdateImg, postImg } from "../tool/login";
export default {
  components: { List },
  data() {
    return {
      userList: [],
      show: false,
    };
  },
  methods: {
    async UpdateList() {
      let res = await Userinfo();
      if (res.code == 200) {
        this.msg = false;
        this.userList = res.data;
      } else {
        this.msg = true;
      }
      console.log(this.userList);
      this.$router.push("/info");
    },
    updateImg() {
      this.$refs.fileRef.dispatchEvent(new MouseEvent("click"));
    },
    async filechange(e) {
      let x = e.target.files[0];
      const fd = new FormData();
      fd.set("file", x);
      console.log(fd);
      let res = await postImg(fd);
      console.log(res);
      const userList=await UserupdateImg({
          avatar:res.data.path
      })
    },
    
  },
  created() {
    this.UpdateList();
  },
};
</script>
<style lang="scss" scoped>
.van-popup {
  .popup_item {
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-bottom: 1px solid gainsboro;
    font-size: 25px;
    color: grey;
  }
}
</style>